<template>
  <div class="container">
    <Breadcrumb :items="['menu.flow', '流程组']" />
    <a-card class="general-card">
      <a-row>
        <a-col :span="24">
          <a-space>
            <a-input-search
              v-model="queryParams.processGroupName"
              placeholder="请输入流程组名称"
              search-button
              allow-clear
              :loading="loading"
              :style="{width:'320px'}"
              @search="fetchData"
            >
              <template #button-icon>
                <icon-search />
              </template>
              <template #button-default>
                查询
              </template>
            </a-input-search>
            <a-button
              v-permission="['flow.process.group.add']"
              type="primary"
              @click="openAdd"
            >
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-spin :loading="loading" style="width: 100%; margin-top: 20px;">
        <a-row :gutter="[24, 12]">
          <a-col v-for="(item, index) in listData" :key="index" :span="6">
            <a-card
              class="card-group"
              :hoverable="true"
              :title="item.processGroupName"
              @click="clickDetail(item)"
            >
              <template #extra>
                <a-link
                  v-permission="['flow.process.group.delete']"
                  @click.stop="clickDelete(item)"
                >
                  删除
                </a-link>
              </template>
              <span style="font-size: 12px;">
                创建时间: {{ item.createTime }}
              </span>
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
    </a-card>

    <!--新增窗口-->
    <dialog-add ref="dialogAddRef" @submit="fetchData" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { processGroupList, deleteProcessGroup, FlowProcessGroup } from '@/api/flow/process-group';
import { hasPermission } from '@/utils/permission';
import { Message, Modal, PaginationProps } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import DialogAdd from '@/views/flow/process-group/dialog/dialog-add.vue';

const { loading, setLoading } = useLoading(false);

const listData = ref<FlowProcessGroup[]>([]);

const queryParams = ref({
  processGroupName: ''
});

const dialogAddRef = ref();

const basePagination: PaginationProps = {
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true
};

const pagination = reactive({
  ...basePagination
});

const clickDelete = (item: FlowProcessGroup) => {
  Modal.warning({
    content: `确定删除流程组【${item.processGroupName}】`,
    simple: true,
    hideCancel: false,
    cancelText: '取消',
    onOk: () => {
      deleteProcessGroup(item.processGroupId).then(() => {
        Message.info('删除成功');
        fetchData();
      });
    }
  });
};

const clickDetail = (item: FlowProcessGroup) => {
  if (hasPermission(['flow.process.group.detail'])) {
    dialogAddRef.value.open(item, false);
  }
};

const fetchData = async () => {
  const params = {
    page: {
      current: pagination.current,
      size: pagination.pageSize
    },
    query: queryParams.value
  };
  setLoading(true);
  try {
    const { data } = await processGroupList(params);
    listData.value = data;
  } finally {
    setLoading(false);
  }
};

const openAdd = () => {
  dialogAddRef.value.open(null, false);
};

onMounted(() => {
  fetchData();
});
</script>

<script lang="ts">
export default {
  name: 'FlowProcessGroup'
};
</script>

<style scoped lang="less">
@import "/src/components/table/common";

.card-group {
  transition-property: all;
}

.card-group:hover {
  transform: translateY(-4px);
}
</style>